// 开发模式配置文件

// 加载模块
const path = require('path');
const HtmlWebpackPlugin = require('html-webpack-plugin');
const EslintWebpackPlugin = require('eslint-webpack-plugin');

// 输出一个配置对象
module.exports = {
    // 多页面配置入口文件
    entry: {
        'index': './src/index.js',// 首页的入口文件
        'goods-list': './src/goods-list.js',// 列表的入口文件
        'goods-add': './src/goods-add.js',// 添加的入口文件
        'login': './src/login.js',// 登录的入口文件
        'register': './src/register.js',// 注册的入口文件
    },

    // 输出（指定输出目录和文件名）
    output: {
        path: path.join(__dirname,'dist'),// 指定输出目录（绝对路径）
        filename: './js/[name]-[hash:5].js',// 指定输出文件名称
    },

    // 加载器
    module: {
        rules: [
            // loader配置
            {
                // 匹配.css结尾的文件
                test: /\.css$/i,
                // 先使用css-loader，再使用style-loader（从右到左执行）
                use: ["style-loader","css-loader"],
            },
            {
                // 匹配.less结尾的文件
                test: /\.less$/i,
                use: ['style-loader','css-loader','less-loader'],
            },
            {
                // 匹配图片文件
                test: /\.(png|jpe?g|gif|svg|webp)/i,
                // 资源模块类型
                type: 'asset',
                parser: {
                    dataUrlCondition: {
                        // 当图片资源小于10kb时，转成base64编码
                        // 优点：减少请求次数
                        // 缺点：图片实际体积变大
                        maxSize: 10 * 1024 // 10kb
                    }
                },
                generator: {
                    // 设置图片打包之后的存储目录和文件名称
                    // [name] 占位符，文件原来的名称
                    // [hash] 占位符，哈希值
                    // [ext] 占位符，文件原来的后缀名
                    filename: './imgs/[hash:5][ext]'
                }
            },
            {
                test: /\.(eot|ttf|woff2?)$/i,
                type: 'asset',
                generator: {
                    // 设置资源打包后的存储目录和文件名称
                    filename: './fonts/[name][ext]'
                }
            }
        ]
    },

    // 插件
    plugins: [
        // plugin配置
        new HtmlWebpackPlugin({
            // 以index.html文件为模板打包生成一个新的html文件
            // 新的html文件有两个特征：1.内容和模板文件一样；2.自动引入打包后的js资源
            template: path.join(__dirname,'public/index.html'),
            // 设置打包之后文件的存储目录和文件名称
            filename: './index.html',
            // 指定当前页面使用index对应的入口资源打包出来的js资源
            chunks: ['index'],
            favicon: path.join(__dirname,'public/favicon.ico')
        }),
        new HtmlWebpackPlugin({
            // 以goods-list.html文件为模板打包生成一个新的html文件
            // 新的html文件有两个特征：1.内容和模板文件一样；2.自动引入打包后的js资源
            template: path.join(__dirname,'public/goods-list.html'),
            // 设置打包之后文件的存储目录和文件名称
            filename: './goods-list.html',
            // 指定当前页面使用list对应的入口资源打包出来的js资源
            chunks: ['goods-list']
        }),
        new HtmlWebpackPlugin({
            // 以goods-add.html文件为模板打包生成一个新的html文件
            // 新的html文件有两个特征：1.内容和模板文件一样；2.自动引入打包后的js资源
            template: path.join(__dirname,'public/goods-add.html'),
            // 设置打包之后文件的存储目录和文件名称
            filename: './goods-add.html',
            // 指定当前页面使用list对应的入口资源打包出来的js资源
            chunks: ['goods-add']
        }),
        new HtmlWebpackPlugin({
            // 以login.html文件为模板打包生成一个新的html文件
            // 新的html文件有两个特征：1.内容和模板文件一样；2.自动引入打包后的js资源
            template: path.join(__dirname,'public/login.html'),
            // 设置打包之后文件的存储目录和文件名称
            filename: './login.html',
            // 指定当前页面使用list对应的入口资源打包出来的js资源
            chunks: ['login']
        }),
        new HtmlWebpackPlugin({
            // 以register.html文件为模板打包生成一个新的html文件
            // 新的html文件有两个特征：1.内容和模板文件一样；2.自动引入打包后的js资源
            template: path.join(__dirname,'public/register.html'),
            // 设置打包之后文件的存储目录和文件名称
            filename: './register.html',
            // 指定当前页面使用list对应的入口资源打包出来的js资源
            chunks: ['register']
        }),
        new EslintWebpackPlugin({
            // 指定要检查的文件目录
            context: path.join(__dirname,'src'),

            // 设置不需要eslint检查的目录
            exclude: path.join(__dirname,'src/js/lib'),
        })
    ],

    // 模式
    mode: 'development',// 开发模式

	// 开发服务器
	devServer: {
		host: 'localhost',
		port: 8888,
		open: true,
		hot: true,
	}
};
